<template>
  <section class='f-order'>
    <section class="f-card-list" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
      <div class="f-title">
        <p>{{ item.pay_time }}</p>
      </div>
      <section class="f-content">
        <div class="g-flex-ct">
          <img style="width: 42px;height: 42px;" src="@/assets/icons/icon_order.png" alt="">
          <div style="margin-left: 8px;">
            <p>{{ item.serv_type_name }}</p>
            <p class="f-mt-05">{{item.pack_name}}</p>
          </div>
        </div>
        <p style="font-size: 14px;color: #FF3F3F;">¥{{item.pay_money}}</p>
      </section>
    </section>
    <p v-if="!list.length" class="f-center">暂无订购记录</p>
  </section>
</template>
  
<script>
import { getStore } from '@/utils/utils';
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../../api';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      code: getStore('CURRENT_CODE').code,
      list: []
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '订购记录(国内)',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: '',
      });

      getChargeLog()
    })

    const getChargeLog = () => {
      let json = {
        code: state.code
      }
      api.chargeLog(json).then(res => {
        state.list = res.data
      })
    }

    const toDetail = (data) => {
      router.push({
        path: '/inChina/rechargeRecordDetail',
        query: {
          orderno: data.orderno
        }
      })
    }

    return {
      ...toRefs(state),
      toDetail
    }
  }
}
  </script>
  
<style lang='scss' scoped>
.f-order {
  padding: 19px 14px;
  .f-card-list {
    background: #ffffff;
    border-radius: 13px;
    padding: 18px 15px 23px 14px;
    margin-bottom: 14px;
    .f-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      color: #424242;
    }
    .f-content {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 12px;
      color: #424242;
    }
  }
}
</style>